<template>
  <div class="main-info" :style="[$parent.getTitleDirStyle, getInfoPadding]">
    <div v-if="infoCls==='info-column'">
      <RTitle :title-color="getModColor" icon="intention" :isShow="getSettingStatus('title')"
              :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    </div>
    <div class="info-content" :class="infoCls">
      <div class="content" v-for="(item, index) in dataLs" :key="index" v-if="item.value">
        <img @click="delItem(index)" alt="删除" class="del" src="@/assets/resume/del.svg"/>
        <img alt="图标" width="15px" v-if="item.icon" :src="item.icon"/>
        <span>{{item.value|| item.name}}</span>
      </div>
    </div>

    <!--操作-->
    <ROperator :operators="['edit']" @edit="onShowEdit"/>
    <RPop v-model="showEdit" title="编写基本信息" width="500px" height="150px">
      <div class="item-between">
        <label>
          出生日期<input class="input-line" placeholder="请输入出生日期" v-model="tempData[0].value"/>
        </label>
        <label>
          工作年限<input class="input-line" placeholder="请输入工作年限" v-model="tempData[1].value"/>
        </label>
      </div>
      <div class="item-between">
        <label>
          电话号码<input class="input-line" placeholder="请输入电话号码" v-model="tempData[2].value"/>
        </label>
        <label>
          联系邮箱<input class="input-line" placeholder="请输入联系邮箱" v-model="tempData[3].value"/>
        </label>
      </div>
      <div>
        <div @click="plushAttr" class="plus">
          <img alt="添加" width="15px" src="@/assets/resume/plus.svg"/>
          <span>自定义字段</span>
        </div>
        <div class="item-between diy" v-for="(item, index) in tempData" v-if="index>3" :key="index">
          <img @click="delAttr(index)" alt="删除" class="del" src="@/assets/resume/del.svg"/>
          <input style="width: 150px" placeholder="字段名字" v-model="item.name"/>
          <input style="width: calc(100% - 175px)" placeholder="字段内容不超过20字" v-model="item.value"/>
        </div>
      </div>
      <div class="item-center">
        <div style="width: 150px;display: flex;flex-direction: row;justify-content: space-between">
          <RButton @click="save">确定</RButton>
          <RButton @click="onShowEdit" type="cancel">取消</RButton>
        </div>
      </div>
    </RPop>
  </div>
</template>

<script>
import RTitle from '../base/RTitle'
import ROperator from '../base/ROperator'
import mixin from '../../store/mixin'
import RPop from '../base/RPop'
import RButton from '../base/RButton'

export default {
  name: 'BaseInfo',
  components: {RButton, RPop, RTitle, ROperator},
  mixins: [mixin],
  data () {
    return {
      showEdit: false,
      tempData: [],
      infoCls: ''
    }
  },
  props: ['compId'],
  created () {
    this.tempData = this.dataLs
  },
  mounted () {
    this.infoCls = this.$el.clientWidth > 410 ? 'info-row' : 'info-column'
  },
  methods: {
    onShowEdit () {
      this.tempData = this._.cloneDeep(this.dataLs)
      this.showEdit = !this.showEdit
    },
    delItem (index) {
      this.dataLs[index].value = ''
    },
    plushAttr () {
      this.tempData.push({type: 'diy', name: '', value: ''})
    },
    delAttr (index) {
      this.tempData.splice(index, 1)
    },
    save () {
      this.dataLs = this.tempData
      this.showEdit = !this.showEdit
    }
  },
  computed: {
    getInfoPadding () {
      return this.infoCls === 'info-column' ? {...this.getModBottom, paddingTop: '20px'} : {}
    }
  }
}
</script>

<style scoped lang="less">

  .main-info {
    padding-top: 0;
    min-height: 0;

    .del {
      position: absolute;
      right: -6px;
      top: -6px;
      width: 12px;
      height: 12px;
      display: none;
    }

    .info-content {
      display: flex;
      flex-wrap: wrap;

      .content {
        position: relative;
        padding: 2px;
        display: flex;
        flex-direction: row;
        cursor: pointer;

        &:hover {
          background: rgba(246, 246, 246, 0.8);

          .del {
            display: block;
          }
        }
      }
    }

    .info-row {
      flex-direction: row;
    }

    .info-column {
      flex-direction: column;
    }

    .info-row .content:not(:last-child):after {
      content: "|";
      display: inline-block;
      margin-left: 2px;
    }

    .plus {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 5px 0;
      width: 80px;
      cursor: pointer;
    }

    .diy {
      margin-bottom: 15px;
      position: relative;

      .del {
        display: block;
        cursor: pointer;
      }
    }
  }

</style>
